<template>
    <div>
        <div class="hen">
            <el-row class="hengfu">
                <el-col :span="12">
                    <el-page-header @back="goBack">
                        <template #content>
                            <el-breadcrumb-item>安排·阅卷</el-breadcrumb-item>
                        </template>
                    </el-page-header>
                </el-col>
            </el-row>
        </div>

        <div class="tab">
            <div class="trr">
                <el-descriptions border direction="vertical" v-loading="loading" :title="tabData.name" :column="6">
                    <el-descriptions-item :span="3" label="开始时间">
                        <el-tag>{{ tabData.createTime }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item :span="3" label="结束时间" >
                        <el-tag>{{ tabData.beginTime }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="状态" :span="3">
                        <el-tag :type="tabData.isStart == null ? 'success' : 'warning'">{{ tabData.isStart == null ?
                            '已结束，已阅卷' : '未阅卷' }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item :span="3" label="阅卷时间">
                        <el-tag>{{ tabData.endTime }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="考试人数" :span="3">
                        <el-tag>{{ count }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="及格人数" :span="3">
                        <el-tag>{{ tabData.passCount }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="及格率" :span="3">
                        <el-tag>{{ pass }}%</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="平均分" :span="3">
                        <el-tag>{{ tabData.avgScore }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="答题详情" :span="6">
                        <el-table :data="tabData.userExams" style="width: 100%" >
                            <el-table-column type="index" width="50" />
                            <el-table-column prop="name" label="姓名" />
                            <el-table-column prop="score" label="得分" />
                            <el-table-column prop="beginTime" label="开考时间" width="190" />
                            <el-table-column prop="finishTime" label="交试时间" width="190" />
                            <el-table-column label="阅卷">
                                <template #default="scope">
                                    <el-tag :type="scope.row.isAbsent == 0 ? 'success' : 'danger'">{{
                                        scope.row.isAbsent == 0 ? '是' : '缺考' }}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="finishTime" label="阅卷时间" width="190" />
                            <el-table-column label="操作" fixed="right">
                                <template #default="scope">
                                    <el-button type="primary" plain size="small"
                                        :color="scope.row.isAbsent == 0 ? '#0EA06F' : 'red'" @click="select(scope.row)"
                                        :disabled="scope.row.isAbsent == 0 ? false : true">答题卡</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-descriptions-item>
                </el-descriptions>
            </div>
        </div>

        <!-- 导入试题弹出框 -->
        <el-dialog v-model="dialogVisible"  :show-close="true" style="width: 80%;margin-top: 1vw;">
            <template #header="{ titleId, titleClass }">
                <div class="my-header">
                    <h4 :id="titleId" :class="titleClass" style="text-align: left;margin-top: 10px;">
                        {{ explain }}-答题卡-{{ labels }}</h4>
                </div>
            </template>
            <div class="tab" style="height: 67; margin: auto;margin-top: -3vw;" v-loading="loading">
                <div class="grid-content">
                    <text style="font-weight: 600;">答题卡</text>
                    <div style="margin-top: -2vh;">
                        <el-radio-group :fill="item.isRight == 0 ? 'red' : ''" style="margin-top: 1vh;"
                            v-for="(item, index) in Position" :key="index + 1" v-model="labelPosition"
                            label="label position" @change="topic">
                            <el-radio-button :label="index">{{ index + 1 }}</el-radio-button>
                        </el-radio-group>
                    </div>
                </div>

                <el-divider style="margin: auto;margin-top: 2vh; width: 97%;">
                    答题详细
                </el-divider>

                <div class="trr" style="height: 43vh;margin-top: 2vh;text-align: left;width: 95%;">
                    <el-tag style="text-align: left;">{{ number }}.选择题{{ score }}分</el-tag>

                    <el-divider content-position="left">
                        题干
                    </el-divider>

                    <text>{{ number }}.{{ name }}</text>
                    <div class="trr1">
                        <div :key="index + 1" v-for="(item, index) in Questions" class="trr2"
                            :style="item.isRight == 1 ? 'border: 2px solid #12E203;' : answer == item.id ? 'border: 1px solid red;' : 'border: 1px solid darkgray'">
                            {{ index == 0 ? 'A' : index == 1 ? 'B' : index == 2 ? 'C' : 'D' }}{{ item.content }}
                        </div>
                    </div>

                    <div style="margin-top: 1vh;">
                        <el-tag style="width: 100%;" class="ml-2" :type="na == is ? 'success' : 'danger'">你的回答为【 {{ na == 1 ? 'A'
                            : na == 2 ? 'B' : na == 3 ? 'C' : 'D' }}】正确回答为【{{ is == 1 ? 'A' : is == 2 ? 'B' : is == 3 ? 'C'
        : 'D' }}】</el-tag>
                    </div>
                </div>

                <div class="grid-content">
                    <el-button style="width: 48%;" type="success" :disabled="labelPosition <= 0 ? true : false" plain
                        @click="topic(--labelPosition)">上一题</el-button>
                    <el-button style="width: 50%;" type="success" :disabled="labelPosition >= content - 1 ? true : false"
                        @click="topic(++labelPosition)">下一题</el-button>
                </div>
            </div>

        </el-dialog>
    </div>
</template>

<script lang="ts">
import type { TypeReviewDto } from '../../../type/review'
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { GetSingleArrange, GetSingleDatika, GetSingleUserExamDetails } from '../../../api/arrange/arrange'
import { ElNotification } from 'element-plus'
import { useRoute, useRouter } from 'vue-router';


export default defineComponent({
    setup() {
        const router = useRouter();
        const route = useRoute()

        const data = reactive<TypeReviewDto>({
            isBan: -1,      // 禁用 
            isPublish: -1,  // 发布 
            loading: true,  // 加载屏 
            disabled: true,  //是否禁用
            content: 0,
            createTime: '',
            explain: '',
            labels: '',
            tabData: [],
            count: 0,
            pass: 0,
            dialogVisible: false,
            labelPosition: 0,

            Position: [],
            name: '',
            number: 0,
            score: 0,
            Questions: [],
            answer: '',
            na: 0,
            is: 0

        })

        const events = {
            goBack() {
                window.history.go(-1)
            },

            // 题目
            topic(val: any) {
                data.Position.forEach((na: any, index: any) => {
                    if (val === index) {
                        data.name = na.content
                        data.number = val + 1
                        data.score = na.fraction
                        data.Questions = na.options
                        data.answer = na.answer
                    }
                });
                data.Questions.forEach((nc: any, index: any) => {
                    if (data.answer == nc.id) {
                        data.na = index + 1
                    }

                    if (nc.isRight == 1) {
                        data.is = index + 1
                    }
                });
            },

            // 考试详情
            select(val: any) {
                data.dialogVisible = true
                data.loading = true
                GetSingleUserExamDetails({
                    id: val.id
                }).then((res: any) => {
                    if (res.result == 0) {
                        data.explain = res.data.aName
                        data.labels = res.data.name
                    }

                })
                GetSingleDatika({
                    id: val.id
                }).then((res: any) => {
                    if (res.result == 0) {
                        data.Position = res.data
                        data.content = data.Position.length
                        data.loading=false
                    }
                    events.topic(data.labelPosition)
                })
            },

            //查询题目
            bind() {
                GetSingleArrange({
                    id: route.params.id
                }).then((res: any) => {
                    if (res.result == 0) {
                        data.loading = false
                        data.tabData = res.data
                        data.count = data.tabData.userExams.length
                        data.pass = Math.round(data.tabData.passCount / data.tabData.userExams.length * 100)
                    }
                })

            },



        }


        onMounted(() => {
            events.bind()
        })

        return {
            ...toRefs(data),
            ...events,
        }

    },
})
</script>

<style scoped>
/* 背景 */
.tab {
    /* background-color: rgb(239, 240, 242); */
    padding: 1vh;
    border-radius: 5px;
    margin-top:-1vh ;
}

.text {
    width: 80%;
    display: inline-block;
    margin-top: 5px;
    border-radius: 5px;
    padding-left: 1vw;
}

.text2 {
    width: 15%;
    display: inline-block;
    margin-top: 5px;
    color: rgb(237, 139, 27);
    font-weight: 500;
    margin-left: 1vw;
    border-radius: 5px;
    padding-left: 1vw;
}

/* 按钮样式 */
.grid-content {
    margin: auto;
    margin-top: 2vh;
    border-radius: 5px;
    background-color: rgb(251, 251, 251);
    width: 95%;
    line-height: 45px;
    text-align: left;
    padding: 10px;
    border: 1px solid darkgray;
    box-shadow: 0px 0px 1px grey;
}

.flex {
    float: right;
    /* margin-right: 2vh; */
}

.trr {
    margin: auto;
    margin-top: 2vh;
    border-radius: 5px;
    padding: 10px;
    /* height: 75vh; */
    width: 99%;
    background-color: rgb(251, 251, 251);
    box-shadow: 0px 0px 2px grey;
}

.trr1 {
    border-radius: 5px;
    padding: 2vh;
    background-color: rgb(238, 238, 237);
    border: 1px solid darkgray;
    box-shadow: 0px 0px 1px grey;
}

.trr2 {
    padding: 1vh;
    margin-top: 1vh;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 1px grey;
}
</style>
